<script setup>
import { reactive, ref } from 'vue';
import Avatar from "@/components/Avatar.vue";
import SetPasswordDialog from "@/components/SetPasswordDialog.vue";
import { getUser, setUser } from "@/api/user.js";

import { useUserStore } from '@/stores/counter';

import { usePowerOps, useTeamOps } from '@/hooks';
const powerOptions = usePowerOps();
const teamOptions = useTeamOps();

const userStore = useUserStore();

const token = userStore.userMsg.token;
const uId = userStore.userMsg.uId;

const userData = reactive({});

getUser(token, uId).then(res=>{
  console.log(res.data);
  if(res.data.code !==3 ){
    ElMessage({
      message:res.data.msg,
      type:"error"
    })
  }else{
    const o = res.data.data[0]
    userData.uName = o.uName;
    userData.tId = o.tId;
    userData.power = o.power;
  }
})

function submit(){
  userData.token = token;
  userData.uId = uId;
  setUser(userData).then(res=>{
    // console.log(res.data);
    if(res.data.code === 1){
      ElMessage({
        message:"修改成功",
        type:"success",
        onClose(){
          // 修改用户状态管理器的数据
          // 如果当前组件中没有将状态管理器中的数据处理成响应式，那么还要同步更新userData中的数据
        }
      })
    }else{
      ElMessage({
        message:res.data.msg,
        type:"error"
      })
    }
  })
}

const dialogFormVisible = ref(false);
const updatePw = () => {
  dialogFormVisible.value = true;
}

function isShow(val){
  dialogFormVisible.value = val;
}
</script>

<template>
  <main>
    <h1>这是个人中心</h1>
    <Avatar></Avatar>
    <el-form :model="userData">
        <el-form-item label="姓名">
          <el-input v-model="userData.uName"/>
        </el-form-item>
        <el-button
            type="success"
            @click.prevent="updatePw"
          >
            修改密码
          </el-button>
        <el-form-item label="部门" prop="tId">
          <el-select-v2
            v-model="userData.tId"
            :options="teamOptions"
          />
        </el-form-item>
        <el-form-item label="职位" prop="power">
          <el-select-v2
            v-model="userData.power"
            :options="powerOptions"
          />
        </el-form-item>
        <p>要修改的原信息：{{ userData }}</p>
    </el-form>
    <el-button type="primary" @click="submit">
        提交
    </el-button>
    <SetPasswordDialog
        :dialogFormVisible="dialogFormVisible"
        @isShow="isShow"
    ></SetPasswordDialog>
  </main>
</template>
